<div id="wrap">

   <!-- Header
   ================================================== -->
   <div id="nav-bar" class="">
      <div class="pull-left">
         <div id="header-container">
            <h5>{{appname}} Demo</h5>
            <div class="dropdown">
               <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
                  Wikipedia Featured
                  <b class="caret"></b>
               </a>
               {{>headermenu}}
            </div>
         </div>
      </div>
      <div class="pull-right">
         {{>loggeduser}}
      </div>
   </div>

   <div id="alerts-container">
      <div id="toast-example1" class="toast toasttext02 fade in">
         <button type="button" class="close" data-dismiss="alert"></button>
         <div class="pull-left">
            <div class="toast-object icon-info-4"></div>
         </div>
         <div class="toast-body">
            <h4 class="toast-heading">Alpha version!</h4>
            <p>Please be patient, this demo is still a work in progress! Thanks.</p>
         </div>
      </div>
   </div>

   <!--<div id="metro-container" class="-container">-->
      <!--<div class="row">-->
         <!--<div id="hub" class="metro">-->
            <div class="metro panorama">
               <div class="panorama-sections">

                  <div class="panorama-section">

                     <h2>Featured pictures</h2>

                     <!--<a class="tile widepeek" href="#">-->
                        <!--<div class="tile wide image">-->
                           <!--<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Darvasa_gas_crater_panorama.jpg/640px-Darvasa_gas_crater_panorama.jpg" alt=""/>-->
                        <!--</div>-->
                        <!--<div class="tile wide text bg-color-orange">-->
                           <!--<div class="text5">The Door to Hell, a burning natural gas field in Derweze, Turkmenistan</div>-->
                        <!--</div>-->
                     <!--</a>-->

                     <div class="tile-column-span-2">
                        <a class="tile wide imagetext wideimage bg-color-blue" href="#">
                           <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Darvasa_gas_crater_panorama.jpg/640px-Darvasa_gas_crater_panorama.jpg" alt=""/>
                           <div class="textover-wrapper bg-color-blueDark">
                              <div class="text2">The Door to Hell, a burning natural gas field in Derweze, Turkmenistan</div>
                           </div>
                        </a>

                        <a class="tile wide imagetext wideimage bg-color-green" href="#">
                           <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Lady_Elliot_Island_SVII.jpg/320px-Lady_Elliot_Island_SVII.jpg" alt=""/>
                           <div class="textover-wrapper transparent">
                              <div class="text2">An image of the coral reef near Lady Elliot Island</div>
                           </div>
                        </a>

                        <a class="tile square image bg-color-red" href="#">
                           <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Wulfenite_mexique.jpg/611px-Wulfenite_mexique.jpg" alt=""/>
                           <div class="textover-wrapper transparent">
                              <div class="text2">Wulfenite </div>
                           </div>
                        </a>

                        <a class="tile square image" href="#">
                           <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Hagia_Sophia_Mars_2013.jpg/640px-Hagia_Sophia_Mars_2013.jpg" alt=""/>
                           <div class="textover-wrapper transparent">
                              <div class="text2">Hagia Sophia</div>
                           </div>
                        </a>

                     </div>

                     <div class="tile-column-span-1">
                        <a class="tile squarepeek bg-color-orange" href="#">
                           <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Anastomus_oscitans_-_Bueng_Boraphet.jpg/384px-Anastomus_oscitans_-_Bueng_Boraphet.jpg" alt=""/>
                           <div class="text-inner">
                              <div class="text4">The Asian Openbill or Asian Openbill Stork (Anastomus oscitans) is a large wading bird in the stork family Ciconiidae.</div>
                           </div>
                        </a>

                     </div>

                  </div>

                  <div class="panorama-section">

                     <h2>Featured articles</h2>

                     <div class="tile-column-span-2">
                        <a class="tile widepeek" href="#">
                           <div class="tile wide image">
                              <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Fuso_Trial_Heading_Left.jpg/640px-Fuso_Trial_Heading_Left.jpg" alt=""/>
                           </div>
                           <div class="tile wide text">
                              <div class="text-header">Fusō</div>
                              <div class="text4">Japanese battleship Fusō (扶桑, a classical name for Japan) was the lead ship of the two Fusō-class dreadnought battleships built for the Imperial Japanese Navy.</div>
                           </div>
                        </a>

                        <a class="tile wide imagetext wideimage bg-color-green" href="#">
                           <img src="http://upload.wikimedia.org/wikipedia/en/e/e9/Famous_Fantastic_Mysteries_August_1942_cover.jpg" alt=""/>
                           <div class="textover-wrapper transparent">
                              <div class="text2">Famous Fantastic Mysteries</div>
                           </div>
                        </a>

                     </div>


                  </div>


                  <div class="panorama-section tile-span-4">

                     <h2>Featured apps</h2>

                     <a class="tile app bg-color-orange" href="#">
                        <div class="image-wrapper">
                           <span class="icon icon-mail"></span>
                        </div>
                        <div class="app-label">Mail</div>
                        <div class="app-count">12</div>
                     </a>

                     <a class="tile app bg-color-blue" href="#">
                        <div class="image-wrapper">
                           <span class="icon icon-map"></span>
                        </div>
                        <div class="app-label">Map</div>
                     </a>

                     <a class="tile wide imagetext bg-color-greenDark" href="#">
                        <div class="image-wrapper">
                           <span class="icon icon-chat-2"></span>
                        </div>
                        <div class="column-text">
                           <div class="text4">Chat with your friends</div>
                        </div>
                        <div class="app-label">145 friends online</div>
                     </a>

                     <a class="tile app bg-color-purple" href="#">
                        <div class="image-wrapper">
                           <span class="icon icon-weather"></span>
                        </div>
                        <div class="app-label">Weather</div>
                     </a>

                     <a class="tile app bg-color-green" href="#">
                        <div class="image-wrapper">
                           <span class="icon icon-linkedin"></span>
                        </div>
                        <div class="app-label">LinkedIn</div>
                     </a>

                  </div>

                  <div class="panorama-section tile-span-4">

                     <h2>Group two</h2>

                     <a class="tile wide imagetext bg-color-blue" href="#">
                        <div class="image-wrapper">
                           <span class="icon icon-music-3"></span>
                        </div>
                        <div class="column-text">
                           <div class="text">Top 10</div>
                           <div class="text">Favorites</div>
                           <div class="text">Best choices</div>
                        </div>
                        <span class="app-label">MUSIC</span>
                     </a>

                     <a class="tile wide imagetext bg-color-blueDark" href="./base-css.html">
                        <div class="image-wrapper">
                           <img src="assets/img/Coding app.png" />
                        </div>
                        <div class="column-text">
                           <div class="text">Typography</div>
                           <div class="text">Tables</div>
                           <div class="text">Forms</div>
                           <div class="text">Buttons</div>
                        </div>
                        <span class="app-label">BASE CSS</span>
                     </a>

                     <a class="tile app bg-color-orange" href="#">
                        <div class="image-wrapper">
                           <img src="assets/img/RegEdit.png" alt="" />
                        </div>
                        <span class="app-label">COMPONENTS</span>
                     </a>

                     <a class="tile app bg-color-red" href="./javascript.html">
                        <div class="image-wrapper">
                           <img src="assets/img/Devices.png" alt="" />
                        </div>
                        <span class="app-label">JAVASCRIPT</span>
                     </a>

                  </div>

               </div>
            </div>
            <a id="panorama-scroll-prev" href="#"></a>
            <a id="panorama-scroll-next" href="#"></a>
            <div id="panorama-scroll-prev-bkg"></div>
            <div id="panorama-scroll-next-bkg"></div>
         <!--</div>-->
      <!--</div>-->
   <!--</div>-->

</div>
